/**
 * @Version: 1.x
 * @Author: Stone
 * @CmpZhName: 轨迹播放
 * @Description: 轨迹播放 AMap 1.x版本
 * @Date: 2021/09/27 11:27
 */
<template>
<div>
  <div class="gps-operater">
    <h3>我要开车去浪。。。。。</h3>
    <el-radio-group v-model="gpsTrackType" @change="radioChange">
      <el-radio-button label="startAnimation">开始播放</el-radio-button>
      <el-radio-button label="pauseAnimation">暂停播放</el-radio-button>
      <el-radio-button label="resumeAnimation">继续播放</el-radio-button>
      <el-radio-button label="stopAnimation">停止播放</el-radio-button>
    </el-radio-group>
  </div>
  <div id="amapContainer"></div>
</div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'

let BIGROUTES = [];

export default {
  name: 'AmapGpsPlayer',
  props: {
    msg: String
  },
  data() {
    return {
      trackGpsList:  [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]],
      solution1: {

      },
      solutionType: '1',
      gpsTrackType: '',
      
    }
  },
  mounted() {
    this.initMapGpsData()
  },
  destroyed() {
    this.roadMapIns && this.roadMapIns.destroy()
  },
  methods: {
    radioChange(type) {
      switch (type) {
        case 'startAnimation':
          this.startAnimation()
          break;
        case 'pauseAnimation':
          this.pauseAnimation()
          break;
        case 'resumeAnimation':
          this.resumeAnimation()
          break;
        case 'stopAnimation':
          this.stopAnimation()
          break;  
      
        default:
          break;
      }
    },
    // 初始化轨迹方法
    initMapGpsData () {
      fetch('https://a.amap.com/amap-ui/static/data/big-routes.json')
      .then(res => res.json())
      .then(res =>  {
        // 北京到深圳路线
        BIGROUTES = res[4]
        console.log('我是大轨迹数据********', BIGROUTES)
        lazyAMapApiLoaderInstance.load().then(() => {
          this.trackGpsList = BIGROUTES.path || []
          // 数据量太大 电脑要反抗了 没办法 只能取前1000个点
          this.trackGpsList.splice(1000)
          this.initMapTrackGpsIns()
        })
      })
    },
    // 实例化高德地图
    initMapTrackGpsIns() {
      this.roadMapIns = new AMap.Map('amapContainer', {
        // center: [116.397428, 39.90923],
        dragEnable: true,
        resizeEnable: true,
        // pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
        // viewMode:'3D', // 地图模式
        // pitch: 75,
        // pitchEnable: true,
        // buildingAnimation: true,
        // preloadMode: true,
        // jogEnable: true,
        // scrollWheel: true,
        // rotateEnable: true,
        // isHotspot: true,
        // mapStyle: 'amap://styles/1c9f14c955f31e63d639a6133328b5a2',
        // keyboardEnable: true,
        zoom: 17,
      })
      // 地图控件
      // let object3Dlayer = new AMap.Object3DLayer();
      // this.roadMapIns.add(object3Dlayer)
      // this.roadMapIns.addControl(new AMap.OverView());
      
        this.initPathSimplifier()

      // 实时路况
      AMapUI.loadUI(['control/BasicControl'], (BasicControl) => {
        let traffic = new BasicControl.Traffic({
            showButton: true,
            theme: 'normal'
        });
        console.log('12312312', traffic)
        // this.roadMapIns.addControl(traffic);
      });
      // this.initPolyline()
      // 地图加载成功
      this.roadMapIns.on("complete", () => {
        setTimeout(() => {
          this.setGpsTrackList()
          this.solutionType = ''
        }, 200)
      });

    },
    // 方案一
    initPathSimplifier() {
      AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！');
          return;
        }
        let defaultRenderOptions = {
          pathLineStyle: {
            lineWidth:6,
            dirArrowStyle: true
          },
          pathNavigatorStyle: {
            autoRotate:false,
            lineJoin:'round',
            lineWidth:6,
            // 走路的路径
            pathLinePassedStyle: {
              lineWidth:6,
              strokeStyle:'#AF5',
              borderWidth:0,
              borderStyle:'#eee',
              dirArrowStyle:true
            }
          },
          getPathStyle: function(pathItem,Zoom) {
            return {
              pathLineStyle: {
                  strokeStyle: pathItem.pathIndex == 1 ? '#AF5' : '#28F',
                  lineWidth: 6
              },
              pathLineSelectedStyle: {
                  lineWidth: 6
              },
            }
          },
        }
        let pathSimplifierIns = new PathSimplifier({
          zIndex: 10,
          map: this.roadMapIns, 
          getPath: (pathData, pathIndex) => {
              return pathData.path;
          },
          renderOptions: defaultRenderOptions
        })
        window.PathSimplifier = PathSimplifier
        window.pathSimplifierIns = pathSimplifierIns;
        
      })
    },
     setGpsTrackList() {
        console.log('我是巡器******', this.trackGpsList, this.navPathIns)
        this.pathSimpifiterData = [{
          name: '轨迹信息0',
          path: this.trackGpsList
        }]
        let len = this.trackGpsList.length - 1
        let startPot = this.trackGpsList[0]
        let endPot = this.trackGpsList[len]
        // 添加起始点
        this.stmarker = new AMap.Marker({
            map: this.roadMapIns,
            position: [startPot[0], startPot[1]], //基点位置
            autoRotation: true,
            size: [38, 30],
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
            zIndex: 10
        });
        this.endmarker = new AMap.Marker({
            map: this.roadMapIns,
            size: [38, 30],
            position: [endPot[0], endPot[1]], //基点位置
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
            zIndex: 10
        });
        // 装填数据
        pathSimplifierIns.setData(this.pathSimpifiterData);
        this.navPathIns = pathSimplifierIns.createPathNavigator(0,{
          loop: false,
          speed: 300,
          pathNavigatorStyle: {
            width:48,
            height:48,
            content: PathSimplifier.Render.Canvas.getImageContent('https://webapi.amap.com/images/car.png'),
            strokeStyle:null,
            pathLinePassedStyle: {
              lineWidth:6,
              strokeStyle:'#AF5',
              borderWidth:0,
              borderStyle:'#eee',
              dirArrowStyle:true
            }
          }
        })
        console.log('88888888888888',  this.navPathIns, pathSimplifierIns)
        this.navPathIns.on('move', (e) => {
          if(this.zoomTimer) {
            return
          }
          this.zoomTimer = setTimeout(() => {
            const lastChild = this.navPathIns.getPosition() 
            // console.log('我是真实的缩放数据', realZoom, this.zoomNum, this.isMapZoomHandle, e)
            this.roadMapIns.setZoomAndCenter(17,lastChild)
            // this.roadMapIns.setPitch(0, true);
            this.zoomTimer = undefined
          }, 1000)
        })
      },

    // 方案二
    initPolyline() {
      this.marker = new AMap.Marker({
        map: this.roadMapIns,
        position: [116.478935,39.997761],
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle:-90,
      });
      // 绘制轨迹
      this.polyline = new AMap.Polyline({
          map: this.roadMapIns,
          path: this.trackGpsList,
          showDir:true,
          strokeColor: "#28F",  //线颜色
          strokeWeight: 6,      //线宽
      });

      this.passedPolyline = new AMap.Polyline({
          map: this.roadMapIns,
          strokeColor: "#AF5",  //线颜色
          strokeWeight: 6,      //线宽
      });


      this.marker.on('moving', (e) => {
        const lastChildPoint = e.passedPath.slice(-1)[0]
          this.passedPolyline.setPath(e.passedPath);
          // 当轨迹很长时 自动聚焦
          this.roadMapIns.setZoomAndCenter(17,lastChildPoint)
      });

      this.roadMapIns.setFitView();
    },
    // 方案二 -----------------
    startAnimation () {
      if(this.solutionType == 1) {
        // 默认速度200km/h 演示可增加
        this.marker.moveAlong(this.trackGpsList, 200);
      } else {
        this.navPathIns.start()
      }
    },
    pauseAnimation () {
      if(this.solutionType == 1) {
        this.marker.pauseMove();
      } else {
        this.navPathIns.pause()
      }
    },
    resumeAnimation () {
      if(this.solutionType == 1) {
        this.marker.resumeMove();
      } else {
        this.navPathIns.resume()
      }
    },
    stopAnimation () {
      if(this.solutionType == 1) {
        this.marker.stopMove();
      } else {
        this.navPathIns.stop()
      }
    },
    // 方案二 -----------------
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#amapContainer {
  height: 100%;
  width: 100%;
  position: relative;
}
.gps-operater {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 9;
}
</style>
<style>
  .amap-ui-pathsimplifier-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .amap-ui-pathsimplifier-container canvas {
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
  }
</style>
